/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
	<view class="page">
		<view class="cation-info">
			{{$t("基础信息")}}
		</view>
		<view class="wrap">
			<u-input v-model="chooseType.label" type="select" :placeholder="$t('请选择行业')" :border="true" @click="openSort" />
			<u-input v-model="cates" type="select" :placeholder="$t('请选择经营类目')" :border="true" @click="checkcates" />
			<view class="u-flex u-row-between u-col-center">
				<view style="font-size:28upx;color:#999">{{$t("店铺Logo")}}</view>
				<view>
					<u-upload :action="upLoadAction" :form-data="formData" @on-success="uploadSuccess($event,'logo')"
						max-count="1" width="140" height="140"></u-upload>
				</view>
			</view>
			<p class="rate">{{$t("当前行业费率")}}：{{industryRate}}‰</p>
		</view>


		<view class="cation-info">
			{{$t("认证信息")}}
		</view>
		<div class="authenticate wrap">
			<u-input type="text" v-model="shopinfo.name" :placeholder="$t('请输入真实姓名')" :border="true" />
			<u-input type="text" v-model="shopinfo.phone" :placeholder="$t('请输入正确的手机号')" :border="true" />
			<u-input type="text" v-model="shopinfo.bank" :placeholder="$t('请输入身份证号码')" :border="true" />
			<u-input type="text" v-model="shopinfo.email" :placeholder="$t('请输入邮箱')" :border="true" />
		</div>


		<view class="cation-info">
			{{$t("身份证件")}}
		</view>
		<div class="u-flex u-row-between idCard">
			<u-upload :action="upLoadAction" :form-data="formData" :upload-text="$t('身份证正面')"
				@on-success="uploadSuccess($event,'sfzz_pic')" max-count="1"></u-upload>
			<u-upload :action="upLoadAction" :form-data="formData" :upload-text="$t('身份证背面')"
				@on-success="uploadSuccess($event,'sfzb_pic')" max-count="1"></u-upload>
			<u-upload :action="upLoadAction" :form-data="formData" :upload-text="$t('手持身份证')"
				@on-success="uploadSuccess($event,'frsfz_pic')" max-count="1"></u-upload>
		</div>


		<view class="cation-info">
			{{$t("店铺信息")}}
		</view>
		<view class="shopInfoWrap">
			<u-input type="text" v-model="shopinfo.shopname" :placeholder="$t('请输入店铺名称')" :border="true" />
			<u-input v-model="shopinfo.shop_desc" type="textarea" :placeholder="$t('请输入店铺描述')" :border="true" />
			<u-input v-model="chooseProvince.label" type="select" :placeholder="$t('请填写所在省份')" :border="true"
				@click="openProvince" />
			<u-input v-model="chooseCity.label" type="select" :placeholder="$t('请填写所在城市')" :border="true" @click="openCity" />
			<u-input v-model="chooseArea.label" type="select" :placeholder="$t('请填写所在地区')" :border="true" @click="openArea" />
			<u-input v-model="xxaddress" type="text" :placeholder="$t('详细地址')" :border="true" />
		</view>


		<view class="filephoto" v-if="settledType == 2">
			<view class="cation-info">{{$t("营业执照")}}</view>
			<u-upload :action="upLoadAction" :form-data="formData" :upload-text="$t('上传营业执照')"
				@on-success="uploadSuccess($event,'zhizhao')" max-count="1"></u-upload>
		</view>

		<view class="tipsText">{{$t("1.请认真填写资料,资料提交成功后不可更")}}</view>
		<view class="tipsText">{{$t("2.信息仅用于实名认证,平台保障您的信息安全")}}</view>

		<u-button type="warning" class="person-button" shape="circle" @click="submitinfo">{{$t("提交审核")}}</u-button>

		<u-popup ref="uniPopup" mode="bottom" border-radius="12">
			<view class="uniPopupClose" @click="closePopUp"><image class="topRightWrapClose" src="/static/images/live/close.png"></image></view>
			<scroll-view scroll-y="true" class="scroll-Y">
				<checkbox-group class="uni-list" @change="checkboxChange">
					<label class="label-3">
						<view class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in catesinfo" :key="index">
							<checkbox :value="String(item.id)" class="checkbox-3">{{item.cate_name}}</checkbox>
						</view>
					</label>
				</checkbox-group>
			</scroll-view>
		</u-popup>

		<mpvue-picker ref="mpvuePicker" :mode="mode" :pickerValueDefault="pickerValueDefault" @onChange="onChange"
			@onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="getNavList">
		</mpvue-picker>
		<mpvue-picker ref="mpvuePickerProvince" :mode="mode" :pickerValueDefault="pickerValueDefaultProvince"
			@onChange="onChangeProvince" @onConfirm="onConfirmProvince" @onCancel="onCancelProvince"
			:pickerValueArray="getProvinceList">
		</mpvue-picker>
		<mpvue-picker ref="mpvuePickerCity" :mode="mode" :pickerValueDefault="pickerValueDefaultCity"
			@onChange="onChangeCity" @onConfirm="onConfirmCity" @onCancel="onCancelCity"
			:pickerValueArray="getCityList">
		</mpvue-picker>
		<mpvue-picker ref="mpvuePickerArea" :mode="mode" :pickerValueDefault="pickerValueDefaultArea"
			@onChange="onChangeArea" @onConfirm="onConfirmArea" @onCancel="onCancelArea"
			:pickerValueArray="getAreaList">
		</mpvue-picker>
	</view>
</template>
<script>
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker'
	import md5Libs from "uview-ui/libs/function/md5";
	import fly from "../../api/config";

	const {
		md5
	} = md5Libs;
	const {
		baseURL
	} = fly.config
	let uploadData = {}
	let indus_id = null // 行业id
	let arrId = [] // 经营类目id

	export default {
		components: {
			mpvuePicker
		},

		data() {
			return {
				showPopupBottom: false,
				formData: {},
				upLoadAction: '',
				mode: 'selector',
				pickerValueDefault: [0],
				pickerValueDefaultProvince: [0],
				pickerValueDefaultCity: [0],
				pickerValueDefaultArea: [0],
				ruzhuinfo: [], // 所有行业信息
				catesinfo: [], // 所有经营类目
				industry_name: '', // 选中的行业
				cates: '', // 选择经营类目
				xxaddress: '', // 详细地址
				shopinfo: {}, // 商家注册信息
				settledType: 1, // 申请入住类型 1 个人入驻  2商家入驻  3 网红入驻
				pirkCity: {
					prores: [],
					cityres: [],
					areares: []
				},
				pro_name: {},
				city_name: {},
				area_name: {},
				disabled: 0,
				disabled2: 0,
				portrait: '', // 头像
				cardZ: '', //身份证正面
				cardF: '', //身份证背面
				frsfz_pic: '', // 手持身份证
				license: '', // 营业执照
				supplement: '', // 补充材料
				indexValue: 0,
				chooseType: {},
				chooseProvince: {},
				chooseCity: {},
				chooseArea: {},
				listType: true,
				industryRate: ''

			}
		},
		onLoad(option) {
			this.settledType = option.typeshop || 1
			const apiUrl = 'api/Common/uploadPic'
			this.upLoadAction = `${baseURL}${apiUrl}`
			this.formData = this.$http.returnCommonParams(apiUrl, 'applyinfo')
			this.getruzhuinfo()
		},
		onShow() {
			this.$http.getpro().then(res => {
				if (res.status == 200) {
					this.pirkCity.prores = res.data
				}
			})
		},
		computed: {
			getNavList() {
				return this.ruzhuinfo.map(res => ({
					label: res.industry_name,
					value: res.id,
				}))
			},

			getManageList() {
				return this.catesinfo.map(res => ({
					label: res.cate_name,
					value: res.id
				}))
			},
			getProvinceList() {
				return this.pirkCity.prores.map(res => ({
					label: res.pro_name,
					value: res.id
				}))
			},
			getCityList(val) {
				return this.pirkCity.cityres.map(res => ({
					label: res.city_name,
					value: res.id
				}))
			},
			getAreaList(val) {
				return this.pirkCity.areares.map(res => ({
					label: res.area_name,
					value: res.id
				}))
			},
		},
		watch: {
			chooseType(val) {
				this.getSortName(val.value[0])
			},
			chooseProvince(val) {
				this.pirkCity.prores.forEach((element, k) => {
					if (element.id == val.value) {
						this.pro_name = element
						this.$http.getcity({
							pro_id: element.id
						}).then(res => {
							if (res.status == 200) {
								//    this.city_name = res.data[0]
								this.pirkCity.cityres = res.data
								this.disabled = 1
							}
						})
					}
				});
			},
			chooseCity(val) {
				this.pirkCity.cityres.forEach((element, k) => {
					if (element.id == val.value) {
						this.city_name = element
						this.$http.getarea({
							city_id: element.id
						}).then(res => {
							if (res.status == 200) {
								//    this.area_name = res.data[0]
								this.pirkCity.areares = res.data
								this.disabled2 = 1
							}
						})
					}
				});
			},
			chooseArea(val) {
				this.pirkCity.areares.forEach((element, k) => {
					if (element.id == val.value) {
						this.area_name = element
					}
				});
			}
		},
		methods: {
			closePopUp(){
				this.$refs.uniPopup.close()
			},
			uploadSuccess(data, img) {
				uploadData[img] = data.data.path
			},

			openSort() {
				this.$refs.mpvuePicker.show();
			},
			onConfirm(e) {
				console.log("-> ", e);
				this.chooseType = e
				this.indexValue = e.index[0]
				let list = this.ruzhuinfo.find(res => (res.id === e.value[0]))
				console.log("-> list", list);
				this.industryRate = list.remind
			},
			onChange(e) {
				this.listType = true
				this.chooseType = e
			},
			onCancel(e) {
				console.log(e);
			},
			openProvince() {
				this.$refs.mpvuePickerProvince.show();
			},
			onConfirmProvince(e) {
				this.chooseProvince = e
			},
			onChangeProvince(e) {
				this.chooseProvince = e
			},
			onCancelProvince(e) {
				console.log(e);
			},
			openCity() {
				this.$refs.mpvuePickerCity.show();
			},
			onConfirmCity(e) {
				this.chooseCity = e
			},
			onChangeCity(e) {
				this.chooseCity = e
			},
			onCancelCity(e) {
				console.log(e);
			},
			openArea() {
				this.$refs.mpvuePickerArea.show();
			},
			onConfirmArea(e) {
				this.chooseArea = e
			},
			onChangeArea(e) {
				this.chooseArea = e
			},
			onCancelArea(e) {
				console.log(e);
			},
			bindPickerChange: function(index, e) {
				if (index == 1) {} else if (index == 2) {} else {}
			},
			checkcates() {
				if (!this.chooseType.label) return this.$toast(this.$t('请选择行业'))
				this.$refs.uniPopup.open();
			},
			/**
			 * 申请入驻获取相关信息 获取行业
			 */
			getruzhuinfo() {
				this.$http.getruzhuinfo().then(res => {
					if (res.status == 200) {
						if (res.data.zhuangtai == 3) {
							// 为1或2时正常 为3时跳转到审核状态页
							return uni.redirectTo({
								url: '/pagesC/applyshop/applyStatus'
							});
						} else if (res.data.zhuangtai == 4) {
							return uni.redirectTo({
								url: '/pagesC/loginSon/settingWx'
							});
						} else {
							this.$nextTick(() => {
								this.ruzhuinfo = res.data.industryres
							})
						}
					}
				})
			},
			/**
			 * 经营类目接口
			 */
			getSortName(id) {
				this.$http.getcates({
					indus_id: id
				}).then(res => {
					if (res.status == 200) {
						this.catesinfo = res.data
					}
				})
			},

			/**
			 * 经营类目
			 */
			checkboxChange(e) {
				arrId = e.detail.value
				let str = []
				for (var i = 0; i < this.catesinfo.length; i++) {
					for (var k = 0; k < arrId.length; k++) {
						if (arrId[k] == this.catesinfo[i].id) {
							str.push(this.catesinfo[i].cate_name)
							//    str += this.catesinfo[i].cate_name
							// this.$refs.uniPopup.close();
						}
					}
				}
				this.cates = str.join('、')
			},
			/**
			 * 提交资料审核
			 */
			submitinfo() {

				if (!this.chooseType.label) {
					return this.$toast(this.$t('请选择行业'))
				}
				if (this.cates == '') {
					this.$toast(this.$t('请选择经营类目'))
					return false
				}
				if (!uploadData['logo']) {
					this.$toast(this.$t('请上传店铺Logo'))
					return false
				}
				if (this.shopinfo.name == '' || this.shopinfo.name == undefined) {
					this.$toast(this.$t('请输入真实姓名'))
					return false
				}
				if (this.shopinfo.phone == '' || this.shopinfo.phone == undefined) {
					this.$toast(this.$t('请输入正确的手机号'))
					return false
				}
				if (this.shopinfo.bank == '' || this.shopinfo.bank == undefined) {
					this.$toast(this.$t('请输入身份证号码'))
					return false
				}
				if (this.shopinfo.email == '' || this.shopinfo.email == undefined) {
					this.$toast(this.$t('请输入邮箱'))
					return false
				}
				if (!uploadData['sfzz_pic']) {
					this.$toast(this.$t('请上传身份证正面照'))
					return false
				}
				if (!uploadData['sfzb_pic']) {
					this.$toast(this.$t('请上传身份证反面照'))
					return false
				}
				if (!uploadData['frsfz_pic']) {
					this.$toast(this.$t('请上传手持身份证正面照'))
					return false
				}
				if (this.shopinfo.shopname == '' || this.shopinfo.shopname == undefined) {
					this.$toast(this.$t('请输入店铺名称'))
					return false
				}
				if (!this.pro_name.pro_name && !this.city_name.city_name && !this.area_name.area_name) {
					this.$toast(this.$t('你还未添加地址'))
					return false
				}
				if (this.xxaddress == '') {
					this.$toast(this.$t('请填写详细地址'))
					return false
				}
				if (!uploadData['zhizhao'] && this.settledType == 2) {
					this.$toast(this.$t('请上传营业执照照片'))
					return false
				}
				const data = {
					apply_type: this.settledType,
					indus_id: this.chooseType.value[0],
					service_rate: this.industryRate,
					cate_ids: arrId.join(','),
					shop_name: this.shopinfo.shopname,
					shop_desc: this.shopinfo.shop_desc,
					logo: uploadData['logo'],
					sfzz_pic: uploadData['sfzz_pic'],
					sfzb_pic: uploadData['sfzb_pic'],
					frsfz_pic: uploadData['frsfz_pic'],
					zhizhao: this.settledType == 2 ? uploadData['zhizhao'] : '',
					sfz_num: this.shopinfo.bank,
					contacts: this.shopinfo.name,
					telephone: this.shopinfo.phone,
					email: this.shopinfo.email,
					pro_id: this.pro_name.id,
					city_id: this.city_name.id,
					area_id: this.area_name.id,
					address: this.xxaddress,
				}
				this.$loading(this.$t('正在上传中...'))
				this.$http.applyShop(data).then(res => {
					console.log("-> res", res);
					if (res.status == 200) {
						this.$toast(res.mess)
						this.$hideLoading()
						setTimeout(() => {
							uni.redirectTo({
								url: '/pagesC/applyshop/applyStatus'
							});
						}, 1000)
					} else {
						this.$toast(res.mess)
					}
				})
			},

		},
	}
</script>
<style lang="scss" scoped>
	.page {
		margin-top: 15upx;
		background-color: #fff;
		padding-bottom: 140upx;
	}

	.per-lists {
		margin: 0 !important;

		picker {
			width: 100%;

			input {
				width: 100%;
				color: #333;
			}
		}

		.infoImg {
			width: 80upx !important;
			height: 80upx !important;
			border-radius: 10upx;
		}

		.items-images {
			padding: 0 30upx 30upx 30upx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 49% !important;
				height: 215upx !important;
			}
		}
	}

	.cation-info {
		background-color: #eee;
		padding: 16upx 30upx;
		color: #555;
	}

	.person-button {
		position: fixed;
		bottom: 20upx;
		left: 50%;
		transform: translateX(-50%);
		width: 90%;
	}

	.scroll-Y {
		height: 500upx;
	}

	.uni-list-cell-pd {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 90upx;
		line-height: 90upx;
		padding-left: 30upx;
	}

	.checkbox-3 {
		width: 100%;
		text-align: left;
	}

	.idCard {
		background-color: #fff;
		padding: 20upx;
	}

	.wrap {
		width: 95%;
		margin: 15upx auto;
	}

	.shopInfoWrap {
		@extend .wrap
	}

	.tipsText {
		margin: 10upx 25upx;
		color: #999;
	}

	/deep/ .u-input--border {
		border: 1upx solid #efefef !important;
		margin: 12upx 0;
	}

	.rate {
		font-size: 24upx;
		color: #999
	}
	.uniPopupClose{
		z-index: 10000000;
		background-color: rgba(0, 0, 0, 0.7);
		border: 1px solid #fff;
		border-radius: 200rpx;
		opacity: 0.5;
		position: fixed;
		width: 60rpx;
		height: 60rpx;
		right: 10rpx;
		top: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		
		image{
			width: 30rpx;
			height: 30rpx;
		}
		
	}
</style>
